import { Meta, Subtitle, Title, Canvas, Controls, Description, Stories, Markdown } from "@storybook/blocks";
import * as PtStepsStories from './PtStepper.stories'

<Meta of={PtStepsStories} />

<Title />

<Subtitle />
[Component reference on primevue](https://primevue.org/steps/)

## Import

```ts
import PtSteps from "@rundeck/ui-trellis/src/library/components/primeVue/PtSteps.vue";
```

## Playground

{/* Make sure your stories file has an export for playground, otherwise storybook will break */}

<Canvas of={PtStepsStories.Playground} sourceState="shown" />
<Controls of={PtStepsStories.Playground} />

## How to use

{/* Add a note here about the relevant props to change appearance of component */}


<Description of={PtStepsStories} />

<Stories title='' includePrimary={false} />


## Accessibility

### Screen Reader

Steps component uses the `nav` element and since any attribute is passed to the root implicitly `aria-labelledby` or `aria-label` can be used to describe the component. Inside an ordered list is used where the current step item defines `aria-current` as "step".

### Keyboard Support

<Markdown>
    {`
| Key           | Function                                                                                       |
| ------------- | ---------------------------------------------------------------------------------------------- |
| tab         | Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. |
| enter       | Activates the focused step if readonly is not enabled.                                         |
| space       | Activates the focused step if readonly is not enabled.                                         |
| right arrow | Moves focus to the next step if readonly is not enabled.                                        |
| left arrow  | Moves focus to the previous step if readonly is not enabled.                                    |
| home        | Moves focus to the first step if readonly is not enabled.                                       |
| end         | Moves focus to the last step if readonly is not enabled.                                        |
`}
</Markdown>
